<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/amazeui.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				max-width: 640px;
				margin: auto;
			}
			
			.top {
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #FF608E;
			}
			
			.top span {
				color: white;
				font-size: 18px;
				font-weight: bold;
				color: white;
			}
			
			#myfoot a {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			#myfoot span:first-of-type {
				font-size: 16px;
			}
			
			.tab {
				background-color: white;
			}
			
			.toptab {
				display: -webkit-box;
			}
			
			.toptab>a {
				border-radius: 10px;
				border: 1px solid #FF608E;
				height: 50px;
				margin: 5px;
				display: -webkit-box;
				-webkit-box-flex: 1;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				color: #FF608E;
			}
			
			.toptab>a:nth-child(3) {
				background-color: #FF608E;
				color: white;
			}
			/*.toptab>div:nth-child(2) {
				position: relative;
				background-color: #FF608E;
			}
			
			.toptab>div:nth-child(3) {
				background-color: #BE590A;
			}*/
			
			.banner {
				margin-bottom: 10px;
				position: relative;
				-webkit-box-flex: 1;
			}
			
			.banner>div {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				color: white;
				font-family: "微软雅黑";
				font-weight: bold;
				display: -webkit-box;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				-webkit-box-orient: vertical;
			}
			
			.banner>div>div {
				text-align: center;
				font-size: 35px;
			}
			
			.banner img {
				width: 100%;
			}
			
			.xinxi {
				border-top: 1px solid #FF608E;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				margin-bottom: 10px;
			}
			
			.xxtop {
				display: -webkit-box;
				padding: 5px;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			.xxtop img {
				width: 100%;
			}
			
			.xxxx {
				margin: 5px;
				border: 1px solid #007AFF;
				border-radius: 10px;
				font-size: 14px;
				padding: 5px;
				text-indent: 2em;
			}
			
			.xxmain {
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			
			.xxmain>div {
				display: -webkit-box;
			}
			
			.xxmain>div>div {
				display: -webkit-box;
				border: 2px solid white;
				background-color: #FF608E;
				color: white;
				width: 50%;
				line-height: 40px;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			.xxmain>div:first-child div {
				background-color: #EC8B89;
				white-space: nowrap;
				overflow: hidden;
			}
			
			.xxmain>div:nth-child(2) div {
				background-color: #5EB95E;
			}
			
			.xxmain>div:nth-child(3) div {
				background-color: #F37B1D;
			}
			
			.list {
				margin: 0px 10px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #FF608E;
				border-radius: 10px;
				margin-bottom: 10px;
				text-align: center;
				color: white;
			}
			
			.cometop {
				position: fixed;
				bottom: 70px;
				right: 10px;
				font-size: 60px;
				width: 60px;
				height: 60px;
				line-height: 60px;
				color: #FF608E;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<span>Y N M</span>
		</div>
		<!--三个tab-->
		<div class="tab" data-am-sticky="{animation: 'slide-top'}">
			<div class="toptab">
				<a href="page2.html">摄影师</a>
				<a href="page2b.html">司仪</a>
				<a href="page2c.html">酒店</a>
			</div>
		</div>
		<!--banner-->
		<div class="banner">
			<img src="img/1-161112162610.jpg" />
			<div>
				<div>这...酒店？</div>
				<div>不！皇族！</div>
			</div>

		</div>
		<!--酒店列表-->
		<div class="list">
			酒店列表
		</div>
		<!--z主要内容-->
		<div class="main">
			<div class="xinxi" v-for="item in info" @click="change(item.id)">
				<div class="xxtop">
					<img :src="item.attributes.imgs[0]" />
				</div>
				<div class="xxxx" v-html="item.attributes.info">
					这是可怜我就哭了奥斯陆大拉手里的美丽爱上来说奥斯卡了电话卡了
				</div>
				<div class="xxmain">
					<div>
						<div>名称</div>
						<div v-html="item.attributes.name">阿富汗国家酒店</div>
					</div>
					<div>
						<div>
							联系
						</div>
						<div v-html="item.attributes.phone">
							133-2233-4566
						</div>
					</div>
					<div>
						<div>
							星级
						</div>
						<div>
							<span class="Hui-iconfont Hui-iconfont-star" v-for="i in item.attributes.rank"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--返回顶部-->
		<div class="cometop" onclick="cometop()" v-if="top>50">
			<span class="Hui-iconfont Hui-iconfont-arrow3-top"></span>
		</div>
		<!--脚步-->
		<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " id="myfoot">
			<ul class="am-navbar-nav am-cf am-avg-sm-4">
				<li>
					<a href="../index.html">
						<span class="Hui-iconfont  Hui-iconfont-home"></span>
						<span class="am-navbar-label">主页</span>
					</a>
				</li>
				<li>
					<a href="../page2/page2.html">
						<span class="Hui-iconfont Hui-iconfont-moban-2"></span>
						<span class="am-navbar-label">详情</span>
					</a>
				</li>
				<li>
					<a href="../page3/page3.html">
						<span class="Hui-iconfont Hui-iconfont-comment"></span>
						<span class="am-navbar-label">信息</span>
					</a>
				</li>
				<li>
					<a href="../page4/page4.html">
						<span class="Hui-iconfont Hui-iconfont-avatar"></span>
						<span class="am-navbar-label">个人中心</span>
					</a>
				</li>
			</ul>
		</div>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/amazeui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue/vue2c.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//返回顶部
			function cometop() {
				$('html, body').animate({
					scrollTop: 0
				}, 1000);
			}
			//滚动条滚动
			$(document).scroll(function() {
				myvue.top = $(document).scrollTop();
			});
		</script>
	</body>

</html>